<script setup>
import MwTable from "./component/MwTableAlarm";
import SearchTable from "./component/SearchAlarm"
import MwDialog from "@/components/Dialog"
import { ElMessage, ElMessageBox } from 'element-plus'
import { CirclePlus, VideoPlay } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue"
import moment from "moment";
import { globalStore } from "@/store/global"
const globalVue = globalStore();
const instance = getCurrentInstance();

// 生命周期
onMounted(async () => {
  getTableData();
  cameraSelect.value = await globalVue.getSelect('cameraSelect');
  alarmSelect.value = await globalVue.getSelect('alarmSelect');
})

// --------------------- 下拉数据 --------------------
const cameraSelect = ref([]);
const alarmSelect = ref([]);

// --------------------- 表格数据 --------------------
const tableData = ref([]);
const tableLoading = ref(false);
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
});
const searchForm = reactive({});
function getTableData() {
  let params = {
    ...pagination,
    ...searchForm
  }
  searchForm.date && (params['startTime'] = moment(searchForm.date[0]).format("YYYY-MM-DD HH:mm:ss"));
  searchForm.date && (params['endTime'] = moment(searchForm.date[1]).format("YYYY-MM-DD HH:mm:ss"));
  tableLoading.value = true;
  instance.proxy.$http.get('statistics.getAlarmList', { params }).then(res => {
    let { content, totalElements } = res.data;
    tableData.value = content;
    pagination.total = totalElements;
    tableLoading.value = false;
  }).catch(err => tableLoading.value = false)
}
function onRefresh() {
  Object.keys(searchForm).map(key => {
    delete searchForm[key];
  })
  getTableData();
}
function onDetail() {
}
function onDelete(row) {
  ElMessageBox.confirm('Confirm Delete ？', 'Delete', {
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    }).then(() => {
      instance.proxy.$http.delete('statistics.deleteAlarm', { data: { id: row.id + '' } }).then(res => {
        getTableData();
        ElMessage({
          type: 'success',
          message: 'Delete successfully',
        })
      })
    }).catch(err => console.log(err))
}
</script>
<template>
  <div class="table_index">
    <SearchTable :cameraSelect="cameraSelect" :alarmSelect="alarmSelect" :searchForm="searchForm" @search="getTableData" @refresh="onRefresh" />
    <div class="table_content">
      <mw-table :loading="tableLoading" :data="tableData" :pagination="pagination" @paginationChange="getTableData" @operate1="onDetail" @operate2="onDelete"></mw-table>
    </div>
  </div>
</template>